<template>
  <view class="merchant">
    <view class="merchant-content">
      <view class="merchant-box">
        <view
          class="merchant-list"
          @click="merchartChangeDesck(s)"
          v-for="(s, k) in merChantData"
        >
          <view class="merchant-info">
            <text
              :style="s.applymentStateDesc == '已驳回' ? 'color:#FD0F07' : ''"
              >{{ s.applymentStateDesc }}</text
            >
          </view>
          <view class="merchant-time" style="margin-bottom: 11rpx">
            <text v-if="s.applymentStateDesc == '已驳回'"
              >驳回原因：{{ s?.auditDetail[0].reject_reason }}</text
            >
          </view>
          <view class="merchant-time">
            <text>提交时间：{{ s?.createTime }}</text>
          </view>
          <view class="merchant-ids" v-if="s?.subMchid">
            <text>二级商户号ID：{{ s?.subMchid }}</text>
          </view>
          <view class="merchant-system-name">
            <text>管理员：{{ s?.createName }}</text>
          </view>
          <view class="merchant-phone">
            <text>手机号：{{ s?.createName }}</text>
          </view>
          <view class="merchant-button">
            <button
              v-if="
                s?.applymentStateDesc != '已驳回' &&
                s?.applymentStateDesc != '完成'
              "
              @click="sign(s)"
            >
              签约
            </button>
            <button v-if="s?.applymentStateDesc == '已驳回'" @click="submit(s)">
              再次提交
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { onLoad, onReachBottom, onShow } from "@dcloudio/uni-app";
import {
  getMerchantPage,
  updateMerchant,
  postMerchant,
  getSignUrl,
  userDetails,
} from "@/api/apiList";
const pageNum = ref(1);
// onReachBottom(() => {
//   console.log(1231);
//   // pageNum.value++;
//   getMerChantPage();
// });
const merChantData = ref<
  Array<{
    status: number;
    adminPhone: string;
    adminName: string;
    memo: string;
    createTime: string;
    businessCode: string | number;
  }>
>([]);
const getMerChantPage = async () => {
  const response = await getMerchantPage({
    pageNum: pageNum.value,
    pageSize: 10,
  });
  if (response?.code == 200) {
    pageNum.value++;
    if (response.data.length > 0) {
      response.data.map(async (items, index) => {
        if (items.applymentId) {
          const res = await userDetails(items.applymentId);
          merChantData.value.push(Object.assign(items, res.data));
        }
      });
      console.log(merChantData.value, "merChantData");
      // response.data;
      // const resulteResponse = await userDetails(response.data.applymentId);
      // if (resulteResponse.data.signUrl) {
      //   window.location.href = resulteResponse.data.signUrl;
      // } else {
      //   uni.showToast({
      //     title: "资料提交成功，请耐心等待",
      //     icon: "none",
      //   });
      //   uni.redirectTo({
      //     url: "/pages/mine/merchant",
      //   });
      // }
    } else {
      uni.showToast({
        title: "暂无数据",
        icon: "none",
      });
    }
  }
  console.log(response);
};

onShow(() => {
  pageNum.value = 1;
  merChantData.value = [];
  updateMerchantFun();
});

const updateMerchantFun = async () => {
  const res = await updateMerchant({
    user: uni.getStorageSync("userInfo").userId,
  });
  if (res.code == 200) {
    merChantData.value = [];
    getMerChantPage();
  }
};
// updateMerchantFun()

const submit = (item) => {
  const {
    userName,
    phonenumber,
    idCard,
    startTime,
    expireTime,
    accountName,
    bank,
    bankArea,
    accountNo,
    frontImage,
    backImage,
    businessImage,
    areaName,
    registerNo,
    merchant,
    legalName,
    id,
    type,
  } = item;
  const data = JSON.stringify({
    userName,
    phonenumber,
    idCard,
    startTime,
    expireTime,
    accountName,
    bank,
    bankArea,
    accountNo,
    frontImage,
    backImage,
    businessImage,
    areaName,
    registerNo,
    merchant,
    legalName,
    id,
    type
  });
  uni.navigateTo({
    url: `/pages/mine/signing?type=${type}&data=${encodeURIComponent(data)}`,
  });
  console.log(item, "item");
};

const sign = async (item) => {
  const response = await userDetails(item.applymentId);
  console.log(response, "response");
  if (response.data.signUrl) {
    window.location.href = response.data.signUrl;
  }
};
</script>
<style lang="scss" scoped>
.merchant {
  .merchant-content {
    padding: 30rpx;

    .merchant-box {
      .merchant-list {
        background: white;
        border-radius: 16rpx;
        padding: 40rpx;
        margin-bottom: 20rpx;

        .merchant-time,
        .merchant-ids,
        .merchant-status,
        .merchant-system-name,
        .merchant-phone {
          text {
            font-family: PingFang SC Medium;
            font-size: 13px;
            color: #111111;
          }
        }

        .merchant-ids {
          margin: 11rpx 0;
        }

        .merchant-system-name {
          margin: 11rpx 0;
        }

        .merchant-info {
          margin-bottom: 11rpx;

          text {
            font-family: PingFang SC Bold;
            font-size: 13px;
            color: #fd0f07;
          }
        }

        .merchant-button {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          margin-top: 20rpx;

          button {
            width: 98px;
            height: 34px;
            border-radius: 4px;
            background: #0753fd;
            font-family: PingFang SC Regular;
            font-size: 15px;
            color: #ffffff;
            margin: 0;
            padding: 0;

            &::after {
              display: none;
            }
          }
        }
      }
    }
  }
}
</style>
